 import React from 'react';
  import ReactDOM from 'react-dom';
  import { HotTable } from '@handsontable/react';
  import Handsontable from 'handsontable';

  class CustomEditor extends Handsontable.editors.TextEditor {
    constructor(props) {
      super(props);
    }

    createElements() {
      super.createElements();

      this.TEXTAREA = document.createElement('input');
      this.TEXTAREA.setAttribute('placeholder', 'Custom placeholder');
      this.TEXTAREA.setAttribute('data-hot-input', true);
      this.textareaStyle = this.TEXTAREA.style;
      Handsontable.dom.empty(this.TEXTAREA_PARENT);
      this.TEXTAREA_PARENT.appendChild(this.TEXTAREA);
    }
  }

  class App extends React.Component {
    constructor(props) {
      super(props);
      this.hotSettings = {
        startRows: 5,
        columns: [
          {
            editor: CustomEditor
          }
        ],
        colHeaders: true,
        colWidths: 200
      };
    }

    render() {
      return (
        <div>111
          <HotTable
            id="hot"
            settings={this.hotSettings}
          />
        </div>
      );
    }
  }

  function creatDiv (id) {
    let div = document.createElement('div')
    div.setAttribute('id', id)
    return div
  }

  setTimeout(() => {
    document.querySelector('body').appendChild(creatDiv('CustomEditor'))    
    ReactDOM.render(<App />, document.getElementById('CustomEditor'));
  },1000)